<template>
  <div>
    <div class="header">
      <div class="top">
        <div class="container">
          <ul class="url">
            <li><i class="slide"></i></li>
            <li>www.xjwd.cn</li>
            <li>
              <a href="new.html"><i class="new"></i>最新更新</a>
            </li>
          </ul>
          <ul class="map">
            <li class="scan-qr">
              <el-dropdown
                style="
                  padding: 0 !important;
                  font-size: 12px !important;
                  color: #999 !important;
                "
              >
                <span class="el-dropdown-link">
                  寻经问道App<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown" style="padding: 0">
                  <div class="scan">
                    <img src="../assets/h5.png" alt="扫码访问手机版" />
                  </div>
                </el-dropdown-menu>
              </el-dropdown>
            </li>

            <li><a href="#" target="_blank" rel="nofollow">免责声明</a></li>
          </ul>
          <div class="cl"></div>
        </div>
      </div>
      <div class="naver container">
        <h1 class="logo" style="font-size: 30px; margin-top: 18px">
          <a style="color: #91512b" href="">午月文化</a>
        </h1>
        <div class="cate">
          <ul class="cate-li">
            <li
              v-for="(menu, index) in meun"
              :key="index"
              :class="{ active: activeMenu === menu.path }"
              @click="navigateTo(menu.path)"
            >
              <span>{{ menu.name }}</span>
            </li>
          </ul>
          <ul
            class="cate-li"
            style="padding: 0 10px; padding-right: 10px; float: right"
          >
            <li style="float: right">
              <el-dropdown
                @command="handleClick"
                style="
                  padding: 10px;
                  font-size: 16px;
                  color: #fff;
                  padding: 10px;
                  font-weight: 800;
                "
              >
                <span
                  style="height: auto; line-height: normal"
                  class="el-dropdown-link"
                >
                  个人中心<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="a">
                    <el-badge :value="cartCount" class="item">
                      <router-link to="/goodsCart">购物车(课程)</router-link>
                    </el-badge>
                  </el-dropdown-item>
                  <el-dropdown-item command="b">
                    <el-badge :value="cartCountShop" class="item">
                      <router-link to="/goodsCart">购物车(商品)</router-link>
                    </el-badge>
                  </el-dropdown-item>
                  <el-dropdown-item command="c">
                    <router-link to="/orderList">课程订单</router-link>
                  </el-dropdown-item>
                  <el-dropdown-item command="d">
                    <router-link to="/shopOrderList">商城订单</router-link>
                  </el-dropdown-item>

                  <!-- <el-dropdown-item>我的收藏</el-dropdown-item> -->

                  <el-dropdown-item command="g">个人信息</el-dropdown-item>
                  <el-dropdown-item command="h">
                    <router-link to="/address">地址管理</router-link>
                  </el-dropdown-item>
                  <el-dropdown-item command="f">退出</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </li>
          </ul>
          <div class="cl"></div>
        </div>
      </div>
    </div>
    <div class="cl"></div>

    <div class="ad-index-top container">
      <a href="" target="_blank"
        ><img style="margin-bottom: 15px" src="../assets/2222.jpg"
      /></a>
    </div>
    <div class="cl"></div>
  </div>
</template>

<script>
import { lessoncartCount, shoppingcartCount } from "@/api/index";
export default {
  props: {
    activeMenu: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      cartCount: 0,
      cartCountShop: 0,
      meun: [
        { name: "首页", path: "/" },
        { name: "寻径", path: "/lesson" },
        { name: "问道", path: "/wendao" },
        { name: "商城", path: "/shop" },
        { name: "综合查询", path: "/other" },
        { name: "我的课程", path: "/myLesson" },
      ],
    };
  },
  mounted() {
    this.getCartCount();
    this.shoppingcartCount();
    this.meun = this.meun.reverse();
  },
  methods: {
    handleClick(v) {
      console.log(v);
      if (v == "f") {
        this.loginOut();
      }
    },
    loginOut() {
      window.location.href = "/login";
    },
    navigateTo(path) {
      if (this.$route.path !== path) {
        this.$router.push(path); // 仅在路径不同的情况下进行导航
      }
    },
    getCartCount() {
      lessoncartCount().then((res) => {
        this.cartCount = res.data;
      });
    },
    shoppingcartCount() {
      shoppingcartCount().then((res) => {
        this.cartCountShop = res.data;
      });
    },
  },
};
</script>

<style scoped lang="scss">
.scan-qr {
  ::v-deep.el-dropdown {
  }
}

.container {
  width: 1300px;
  margin: 0 auto;
}

.ad-index-top {
  margin: 0 auto 20px;
  height: 80px;
  padding-top: 114px;
}

.ad-index-top img {
  float: left;
  width: 1300px;
  height: 80px;
}

.ad-index-middle {
  float: left;
  margin: 20px 0 10px 20px;
  width: 980px;
  height: 80px;
}

.cl {
  clear: both;
}

.header {
  width: 100%;
  height: 130px;
  background-color: #fff;
  position: fixed;
  top: 0;
  z-index: 999;
}

.header .top {
  width: 100%;
  height: 40px;
  line-height: 38px;
  background-color: #333;
  color: #999;
}

.header .top li {
  display: inline-block;
  padding: 0 10px;
  border-right: 1px solid #343434;
  position: relative;
  height: 40px;
  line-height: 40px;
}

.header .top a {
  color: #999;
}

.header .top a:hover {
  color: #fff;
}

.active span {
  border-bottom: 2px solid #fff !important;
}

.header .top .url {
  float: left;
}

.header .top .url .slide {
  display: inline-block;
  position: relative;
  top: 3px;
  width: 20px;
  height: 14px;
}

.header .top .map {
  float: right;
}

.header .top .map li {
  float: left;
}

.header .naver {
  padding: 15px 0;
  position: relative;
}

.header .naver .logo {
  width: 162px;
  float: left;
}

.header .naver .logo img {
  width: 180px;
  height: 52px;
  margin-top: 10px;
}

.header .naver .cate {
  float: left;
  min-width: 1134px;
  background-color: #91512b;
  height: 50px;
}

.header .naver .cate .cate-li {
  float: left;
  padding: 0 10px;
  padding-left: 0;
}

.header .naver .cate .cate-li li {
  float: right;
  position: relative;
  text-align: center;
  padding-left: 35px;
}

.header .naver .cate .cate-li span {
  display: inline-block;
  height: 45px;
  line-height: 49px;
  font-size: 16px;
  padding: 0 13px;
  position: relative;
  border-bottom: 0;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
}

.header .naver .cate .cate-li span:after {
  content: " ";
  display: inline-block;
  width: 1px;
  height: 14px;
  border-left: 1px solid #b2b2b2;
  position: absolute;
  right: 0;
  top: 17px;
}

.header .naver .cate .cate-li li:last-child span::after {
  border-left: 0;
}

.header .naver .cate .hot-search {
  padding: 10px;
  padding-left: 18px;
  color: #8a8a8a;
}

.header .naver .cate .hot-search span {
  color: #8a8a8a;
}

.header .naver .cate .hot-search span:after {
  content: "-";
  display: inline-block;
  padding: 0 8px;
}

.header .naver .cate .hot-search span:last-child::after {
  content: "";
}
</style>